<template>
  <div class="color-model">
    <a-input
      readonly
      :disabled="disabled"
      placeholder="请输入"
      v-model:value="checkColor"
      allow-clear
      @click="showModal"
    >
    </a-input>

    <a-modal
      title="选择颜色"
      width="1100px"
      v-model:visible="isShow"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div class="axis">
        <ul class="x">
          <li />
          <li
            v-for="(item, index) in colorArr"
            :key="'x' + index"
            :title="item.title"
            :style="{
              background: item.bgColor,
              color: item.highlightColor && '#fff'
            }"
          >
            {{ item.name }}
          </li>
        </ul>
        <ul v-for="(item, index) in colorArr" :key="'y' + index" class="y">
          <li
            :title="item.title"
            :style="{
              background: item.bgColor,
              color: item.highlightColor && '#fff'
            }"
          >
            {{ item.name }}
          </li>
          <li
            v-for="(v, i) in colorArr"
            :key="'y' + i + v"
            :class="['item', checkColor === v.name + item.name && 'active']"
            :style="[
              checkColor &&
                checkColor[0] === v.name && { background: 'rgba(0,0,0,5%)' },
              checkColor &&
                checkColor[1] === item.name && { background: 'rgba(0,0,0,5%)' },
              checkColors.includes(v.name + item.name) && {
                fontWeight: 'bold',
                color: '#fff',
                background: 'gray'
              }
            ]"
            @click="
              !checkColors.includes(v.name + item.name) &&
                changeColor(v.name + item.name)
            "
          >
            <span
              :style="
                checkColor === v.name + item.name &&
                checkColor[0] === v.name && {
                  color: v.highlightColor && '#fff',
                  background: v.bgColor
                }
              "
              >{{ v.name }}</span
            >
            <span
              :style="
                checkColor === v.name + item.name &&
                checkColor[1] === item.name && {
                  color: item.highlightColor && '#fff',
                  background: item.bgColor
                }
              "
              >{{ item.name }}</span
            >
          </li>
        </ul>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'

import { productCenter_currency_attr_post_ } from 'server/apis/3028.js'
const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  checked: {
    type: Array,
    default: () => []
  }
})
const emits = defineEmits(['update:value', 'change'])
const checkColor = ref(props.value || '')
const checkColors = ref(props.checked || [])
const isShow = ref(false)
const initValue = ref(null)
watch(
  () => props.value,
  val => {
    console.log(val, 'props.value')
    checkColor.value = val
    initValue.value = val
  }
)
watch(
  () => props.checked,
  val => {
    checkColors.value = val
  }
)

const { productAttrs } = productCenter_currency_attr_post_({
  programCode: 'matchColor'
})

const colorArr = computed(() => {
  const arr = []
  if (productAttrs.value && productAttrs.value.length) {
    productAttrs.value.map(item => {
      arr.push({
        title: item.description,
        name: item.code,
        bgColor:
          item.remarks.length > 7
            ? item.remarks.slice(0, item.remarks.length - 1)
            : item.remarks,
        highlightColor: item.remarks.length > 7
      })
    })
  }

  return arr
})
const handleOk = () => {
  emits('update:value', checkColor.value)
  isShow.value = false
  // handleCancel()
}
const changeColor = val => {
  checkColor.value = val
}
const handleCancel = () => {
  isShow.value = false
  checkColor.value = initValue.value
  emits('update:value', checkColor.value)
}
const showModal = () => {
  if (!props.disabled && colorArr.value.length > 0) {
    isShow.value = true
  }
}
</script>

<style lang="scss" scoped>
.axis {
  width: max-content;
  margin: auto;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.x,
.y {
  display: flex;
}
li {
  width: 46px;
  line-height: 24px;
  text-align: center;
}
.item {
  display: flex;
  justify-content: center;
}
.item:hover {
  font-weight: bold;
  cursor: pointer;
}
.active {
  font-weight: bold;
  span {
    flex: 1;
  }
}
</style>
